<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <vue-context-menu :contextMenuData="contextMenuData"
                        @tableConfig="tableConfig"
                        @deletedata="deletedata"></vue-context-menu>

      <el-dialog title="表格配置"
                 :visible.sync="tableConfigShow"
                 width="60%">
        <j-table-column-config :columns.sync="crud.header"  @tabSave="tabSave" @pit="pit" />
      </el-dialog>


      <el-dialog title="查询"
                 :visible.sync="crud.props.searchToggle"
                 width="30%">
        <el-form>
          <el-form-item label="业务日期">
            <el-date-picker
              v-model="dataExtent"
              type="daterange"
              @change="getValue()"
              align="right"
              unlink-panels
              style="width: 100%"
              format="yyyy - MM - dd "
              value-format="yyyy-MM-dd"
              default-value
              range-separator=""
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              >
            </el-date-picker>
            <el-row :gutter="10" class="flex flex-reverse" style="padding-top: 30px">
              <el-button class="filter-item"  size="mini" type="primary" @click="()=>{this.fictitiousOptions.startIndex = 0;this.crud.props.searchToggle = false;crud.toQuery()}">搜索</el-button>
              <el-button class="filter-item" plain   size="mini" type="primary"
                         @click="resetQuery">重置</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>

      <crudOperation :permission="permission">
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table"
                stripe
                border
                :show-summary="true"
                :summary-method="crud.sumRow"
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%;"
                height="700"
                v-if="isShowTable"
                @header-dragend="changeColWidth"
                @contextmenu.native="showMenu"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column :render-header="crud.renderHeader" label="序号" type="index" width="60" />
<!--        <el-table-column :render-header="crud.renderHeader" prop="index" width="60" label="序号">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.$index + fictitiousOptions.startIndex +  1 }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column

          v-if="item.visible"
          v-for="(item, index) in crud.header"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="columnLabel(item)"
          :width="item.width + 'px'"
          :data-porp='item.prop'
          @contextmenu.native="showMenu"
          @header-dragend="changeColWidth"
        >
          <!-- 自定义渲染模版 -->
          <template slot-scope="scope">
            <!-- 当列key为 sort 时，渲染一个手柄icon -->
            <template v-if="item.prop =='sort'">
              <div class="handle_move">
                <i :class="scope.row['sort']" />
              </div>
            </template>
            <template v-else>
              <span v-if="item.type == 1" style="margin-left: 10px">{{scope.row[`${item.prop}`]}}</span>
              <span v-else-if="item.type == 2" style="margin-left: 10px">{{ parseTime(scope.row[`${item.prop}`])}}</span>
              <span v-else-if="item.type == 3" style="margin-left: 10px">{{ getDict(`this.dict.label.${item.dictionary}["${scope.row[item.prop]}"]`) }}</span>
              <span v-else-if="item.type == 4" style="margin-left: 10px">
                <span v-if="item.prop == 'endBoxNum'">
                    {{ scope.row.endBoxNum }}{{ scope.row.boxUnitName }}{{ scope.row.endMainNum }}{{ scope.row.mainUnitName }}
                  </span>
                  <span v-else-if="item.prop == 'endBoxCount'">
                    {{ scope.row.endBoxCount }}{{ scope.row.boxUnitName }}
                  </span>
                <span v-else-if="item.prop == 'inBoxNum'">
                    {{ scope.row.inBoxNum }}{{ scope.row.boxUnitName }}{{ scope.row.inMainNum }}{{ scope.row.mainUnitName }}
                  </span>
                  <span v-else-if="item.prop == 'inBoxCount'">
                    {{ scope.row.inBoxCount }}{{ scope.row.boxUnitName }}
                  </span>
                <span v-else-if="item.prop == 'initBoxNum'">
                    {{ scope.row.initBoxNum }}{{ scope.row.boxUnitName }}{{ scope.row.initMainNum }}{{ scope.row.mainUnitName }}
                  </span>
                  <span v-else-if="item.prop == 'initBoxCount'">
                    {{ scope.row.initBoxCount }}{{ scope.row.boxUnitName }}
                  </span>
                <span v-else-if="item.prop == 'outBoxNum'">
                    {{ scope.row.outBoxNum }}{{ scope.row.boxUnitName }}{{ scope.row.outMainNum }}{{ scope.row.mainUnitName }}
                  </span>
                  <span v-else-if="item.prop == 'outBoxCount'">
                    {{ scope.row.outBoxCount }}{{ scope.row.boxUnitName }}
                  </span>

              </span>
            </template>
          </template>
        </el-table-column>

<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('goodsName')" prop="goodsName" label="商品名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('warehouseName')" prop="warehouseName" label="仓库名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('storehouseName')" prop="storehouseName" label="库位名称" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('batchNo')" prop="batchNo" label="批次号" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('producedDate')" prop="producedDate" label="生产日期">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.producedDate) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="供应商名称"  width="100"/>-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('sourceCode')" prop="sourceCode" label="来源单据编号" width="100"/>-->
<!--&lt;!&ndash;        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('operType')" prop="operType" label="来源单据类型" />&ndash;&gt;-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('initNum')" prop="initNum" label="初始数量" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('inNum')" prop="inNum" label="入库数量" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('outNum')" prop="outNum" label="出库数量" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('endNum')" prop="endNum" label="剩余数量" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('remark')" prop="remark" label="备注" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('orderRemark')" prop="orderRemark" label="单据说明" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createUserName')" prop="createUserName" label="添加人" />-->
<!--        <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('createTime')" prop="createTime" label="添加时间">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{ parseTime(scope.row.createTime) }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudWareStockExistDetail from '@/api/erp/wareStockExistDetail'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import {tablemixins} from "@/mixins/tablemixins";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
import { publicListKey } from "@/utils/key";

const isShowZeroInOutDetail =  sessionStorage.getItem('isShowZeroInOutDetail') || 0
// crud交由presenter持有
const defaultCrud = CRUD({ title: '库存记录明细',name:'wareStockExistDetail', url: 'api/wareStockExist/detail', sort: 'id,desc',  optShow: {
    add: false,
    edit: false,
    del: false,
    download: false,
    leadingIn: false,
    enable: false,
    disable: false,
    pass: false,
    reject: false
  },
  query:{
    isShowZeroInOutDetail
  },
  params() {
    const href = location.href.split('/')
    return {
      id: href[href.length - 1] == 'add' ? 0 : href[href.length - 1],
    }
  }, crudMethod: { ...crudWareStockExistDetail }})
const defaultForm = { id: null, orderId: null, sourceType: null, sourceId: null, sourceCode: null, sourceDetailId: null, serialNumber: null, operType: null, customerId: null, goodsId: null, warehouseId: null, locationId: null, storehouseId: null, batchNo: null, producedDate: null, deadlineDate: null, initNum: null, inNum: null, outNum: null, endNum: null, remark: null, orderRemark: null, createUserId: null, createUserCode: null, createUserName: null, createTime: null }
export default {
  name: 'wareStockExistDetail',
  dicts:['t_ware_stock_exist_detail_oper_type'],
  components: { pagination, crudOperation, rrOperation, udOperation, jTableColumnConfig },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(), tablemixins, publicListKey],
  data() {
    return {
      dataExtent:[],
      permission: {
        add: ['admin', 'wareStockExistDetail:add'],
        edit: ['admin', 'wareStockExistDetail:edit'],
        del: ['admin', 'wareStockExistDetail:del'],
        import: ['admin', 'wareStockExistDetail:import'],
        export: ['admin', 'wareStockExistDetail:export'],
        copy: ['admin', 'wareStockExistDetail:copy'],
        upload: ['admin', 'wareStockExistDetail:upload'],
        download: ['admin', 'wareStockExistDetail:download'],
      },
      rules: {
        orderId: [
          { required: true, message: '库存记录id不能为空', trigger: 'blur' }
        ],
        goodsId: [
          { required: true, message: '商品id不能为空', trigger: 'blur' }
        ]
      },
      fictitiousOptions:{
        startIndex:0,
        showRow: 20,
        tbody:null,
        ratio:0,
        rowHeight: 30,
        showHeight: 0
      },
      fictitiousList:[]
    }
  },
  watch: {
  },
  mounted() {
    this.crud.props.searchToggle = false
    // this.$refs.table.bodyWrapper.addEventListener("scroll",this.setFictitious)
    // window.addEventListener('resize',()=>{
    //   this.fictitiousOptions.ratio = this.crud.getRatio() / 100
    //   this.fictitiousOptions.showHeight = this.fictitiousOptions.rowHeight / this.fictitiousOptions.ratio
    // })
    // this.fictitiousOptions.tbody = this.$refs.table.bodyWrapper.querySelector('table')
    // this.fictitiousOptions.ratio = this.crud.getRatio() / 100
    // this.fictitiousOptions.showHeight = this.fictitiousOptions.rowHeight / this.fictitiousOptions.ratio
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.afterRefresh]() {
      // this.fictitiousList = this.crud.data.slice(this.fictitiousOptions.startIndex,this.fictitiousOptions.startIndex + this.fictitiousOptions.showRow)
      // this.fictitiousOptions.tbody.style.paddingBottom = (this.crud.data.length - this.fictitiousOptions.startIndex) * this.fictitiousOptions.showHeight + 'px'
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },
    getValue(e){
      if (this.dataExtent){
        this.query.startTime =this.dataExtent[0]
        this.query.endTime =this.dataExtent[1]
      }else {
        this.query.startTime =null
        this.query.endTime =null
      }
    },
    resetQuery(){
      this.dataExtent = []
      this.fictitiousOptions.startIndex = 0
      this.query.startTime = null
      this.query.endTime = null
      this.crud.toQuery()
      this.crud.props.searchToggle = false
    },
    setFictitious(e){
      this.fictitiousOptions.startIndex = Math.floor(e.target.scrollTop / this.fictitiousOptions.showHeight)
      this.fictitiousList = this.crud.data.slice(this.fictitiousOptions.startIndex,this.fictitiousOptions.startIndex + this.fictitiousOptions.showRow)
      this.fictitiousOptions.tbody.style.paddingTop = this.fictitiousOptions.startIndex * this.fictitiousOptions.showHeight + 'px'
      this.fictitiousOptions.tbody.style.paddingBottom = (this.crud.data.length - this.fictitiousOptions.startIndex) * this.fictitiousOptions.showHeight + 'px'
    }
  }
}
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
